<template>
    <div class='wrap'>
        <div
            class='app-left'
            ref='app-left-wrap'
            :class='{isOut: (isHidden && type === "css"),  isShow : type !== "js", isJs: type === "js"}'
        >
            <left ref='app-left' />
            <div @click='appLeftHidden' class='app-left-back'>
                <v-icon color='#fff' v-if='isHidden'>mdi-menu-left-outline</v-icon>
                <v-icon color='#fff' v-else>mdi-menu-right-outline</v-icon>
            </div>
        </div>
        <div class='app-right' :class='{viewAll : !isHidden || type === "js"}'>
            <router-view></router-view>
        </div>
        <div
            class='phone-bg'
            :class='{bg_animate_in: isHidden, bg_animate_out: !isHidden}'
            @click='appLeftHidden'
        ></div>
    </div>
</template>


<script>
import left from './left/left';
import right from './right/right';
import { AutoUnevent } from '@/utils/utilFun.js';

const event = new AutoUnevent();
export default {
    data() {
        return {
            isHidden: true,
            type: 'css',
        };
    },
    components: {
        left,
        right,
    },
    mounted() {
        const appLeftWrap = this.$refs['app-left-wrap'];
        const appLeft = this.$refs['app-left'].$el;
        let isPhone = window.innerWidth <= 450;
        event.on(
            window,
            'resize',
            () => {
                isPhone = window.innerWidth <= 450;
                if (!isPhone) {
                    this.type = 'css';
                }
            },
            {
                passive: true,
            }
        );

        event.on(appLeft, 'mousedown', e => {
            if (!isPhone) return false;
            this.type = 'js';
            const startOffset = {
                x: e.pageX,
            };
            let prev = 0;
            let result = 0;
            const moveOff = event.on(
                window,
                'mousemove',
                e => {
                    const moveOffset = {
                        x: e.pageX,
                    };
                    prev = result;
                    result = moveOffset.x - startOffset.x;
                    if (result > 0) {
                        return;
                    }
                    appLeftWrap.style.transform = `translateX(${result}px)`;
                },
                {
                    passive: true,
                }
            );
            const upOff = event.on(
                window,
                'mouseup',
                () => {
                    if (prev === 0 && result === 0) {
                        moveOff();
                        upOff();
                        return;
                    }
                    let type = '0px';
                    if (prev >= result) {
                        type = '-100%';
                        this.isHidden = false;
                    }

                    this.$nextTick(() => {
                        appLeftWrap.style.transform = `translateX(${type})`;
                    });

                    moveOff();
                    upOff();
                },
                {
                    passive: false,
                }
            );
        });
        event.on(appLeft, 'touchstart', e => {
            if (!isPhone) return false;
            this.type = 'js';
            e = e.touches[0];
            const startOffset = {
                x: e.pageX,
            };
            let prev = 0;
            let result = 0;
            const moveOff = event.on(
                window,
                'touchmove',
                e => {
                    e = e.touches[0];
                    const moveOffset = {
                        x: e.pageX,
                    };
                    prev = result;
                    result = moveOffset.x - startOffset.x;
                    if (result > 0) {
                        return;
                    }
                    appLeftWrap.style.transform = `translateX(${result}px)`;
                },
                {
                    passive: true,
                }
            );
            const upOff = event.on(
                window,
                'touchend',
                () => {
                    if (prev === 0 && result === 0) {
                        moveOff();
                        upOff();
                        return;
                    }
                    let type = '0px';
                    if (prev >= result) {
                        type = '-100%';
                        this.isHidden = false;
                    }

                    this.$nextTick(() => {
                        appLeftWrap.style.transform = `translateX(${type})`;
                    });

                    moveOff();
                    upOff();
                },
                {
                    passive: false,
                }
            );
        });
    },
    beforeDestroy() {
        event.clear();
    },
    methods: {
        appLeftHidden() {
            const appLeftWrap = this.$refs['app-left-wrap'];
            this.type = 'css';
            this.isHidden = !this.isHidden;
            appLeftWrap.style.cssText = '';
        },
    },
};
</script>
<style lang='scss' scoped>
.wrap {
    position: relative;
    display: flex;
    flex-flow: row nowrap;
    width: 100%;
    height: 100%;
    overflow: hidden;
    > div {
        height: 100%;
    }
    .app-left {
        position: relative;
        width: 23%;
        min-width: 340px;
        @media (max-width: 450px) {
            & {
                width: 87%;
                min-width: 250px;
            }
        }
        .app-left-back {
            position: absolute;
            right: -24px;
            width: 24px;
            height: 50px;
            top: 0px;
            background: rgb(62, 62, 62);
            line-height: 50px;
            text-align: center;
            transition: background 0.5s ease;
            &:hover {
                background: rgb(34, 34, 34);
            }
        }
    }
    .isJs {
        position: relative;
        transform: translateX(0px);
        z-index: 100000;
    }
    .app-right {
        transition: all ease 0.2s;
        width: 77%;
        @media (max-width: 450px) {
            position: absolute;
            width: 100%;
        }
    }
    .phone-bg {
        transition: background-color 0.3s ease;
    }
    @media (max-width: 450px) {
        .phone-bg {
            position: fixed;
            width: 100%;
            height: 100%;
            background-color: rgba(56, 54, 54, 0.5);
        }
    }
    .bg_animate_in {
        display: block;
        animation: bgToIn 0.3s ease;
    }
    .bg_animate_out {
        animation: bgToOut 0.3s ease;
        display: none;
    }

    @keyframes bgToIn {
        0% {
            display: block;
            background-color: rgba(0, 0, 0, 0);
        }
        100% {
            background-color: rgba(56, 54, 54, 0.5);
        }
    }
    @keyframes bgToOut {
        0% {
            display: block;
            background-color: rgba(0, 0, 0, 0.5);
        }
        100% {
            background-color: rgba(0, 0, 0, 0);
            display: block;
        }
    }

    .viewAll {
        position: absolute;
        right: 0px;
        width: 100%;
        animation: rightViewAll 0.3s;
    }
    @keyframes rightViewAll {
        0% {
            width: 77%;
        }
        100% {
            width: 100%;
        }
    }
    .isShow {
        animation: showToHidden 0.2s ease;
        transform: translateX(-100%);
        z-index: 100000;
        position: absolute;
    }
    .isOut {
        animation: isOutHidden 0.2s ease;
        transform: translateX(0px);
        position: relative;
    }

    @keyframes showToHidden {
        0% {
            transform: translateX(0px);
            position: relative;
        }
        100% {
            transform: translateX(-100%);
            position: relative;
        }
    }

    @keyframes isOutHidden {
        0% {
            transform: translateX(-100%);
        }
        100% {
            transform: translateX(0px);
        }
    }
}
</style>